<template>
  <div class="blog">
    <el-card class="blog-margin">
      <!-- 输入框区域 -->
      <el-row class="demo-autocomplete">
        <el-col class="el-width-max">
          <el-input v-model="input" placeholder="请输入博客名"></el-input>
        </el-col>
        <el-col class="el-width-max">
          <el-autocomplete
            class="inline-input"
            v-model="state1"
            :fetch-suggestions="querySearch"
            placeholder="请输入分类名"
          ></el-autocomplete>
        </el-col>
        <el-col class="el-width-max">
          <el-autocomplete
            class="inline-input"
            v-model="state1"
            :fetch-suggestions="querySearch"
            placeholder="请输入标签名"
          ></el-autocomplete>
        </el-col>
        <el-col class="el-width-mini">
          <el-select v-model="value" placeholder="推荐等级">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col class="el-width-mini">
          <el-select v-model="value" placeholder="是否发布">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col class="el-width-mini">
          <el-select v-model="value" placeholder="是否原创">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col class="el-width-mini">
          <el-select v-model="value" placeholder="文章类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-button type="primary" icon="el-icon-search">查找</el-button>
      </el-row>
      <!-- 三大按钮区域 -->
      <el-row class="button-margin">
        <el-button type="primary" icon="el-icon-edit">添加博客</el-button>
        <el-button type="warning" icon="el-icon-s-flag">导出选中</el-button>
        <el-button type="info" icon="el-icon-folder-opened">添加专题</el-button>
      </el-row>
      <!-- table表格区域 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="序号" width="110"> </el-table-column>
        <el-table-column prop="name" label="标题图" width="110"></el-table-column>
        <el-table-column prop="name" label="标题" width="110"> </el-table-column>
        <el-table-column prop="name" label="作者" width="110"> </el-table-column>
        <el-table-column prop="name" label="是否原创" width="110">
          <template slot-scope>
            <el-tag type="success">原创</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="分类" width="110"> </el-table-column>
        <el-table-column prop="name" label="标签" width="110">
          <template slot-scope>
            <el-tag type="danger">机器学习</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="标题图" width="110"> </el-table-column>
        <el-table-column prop="name" label="推荐等级" width="110">
          <template slot-scope>
            <el-tag>四级排序</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="点击数" width="110"> </el-table-column>
        <el-table-column prop="name" label="开启评论" width="110">
          <template slot-scope>
            <el-tag>开启</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="发布状态" width="110">
          <template slot-scope>
            <el-tag>发布</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="创建时间" width="110"> </el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="37"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Blog',
  data() {
    return {
      input: '',
      restaurants: [],
      state1: '',
      value: '',
      options: [
        {
          value: '1',
          label: 'zs',
        },
        {
          value: '3',
          label: 'ls',
        },
      ],
      // 表单
      tableData: [1, 2, 3, 4, 5, 6],
      // 分页
      pagesize: 100, // 每页显示条目个数
      total: 37, // 总条数
      currentpage: 1, // 当前页数
    };
  },
  methods: {
    querySearch() {},
    // 点击编辑触发的函数
    handleEdit() {},
    // 点击删除触发的函数
    handleDelete() {},
    // 当选择项发生变化时会触发该事件
    handleSelectionChange() {},
  },
};
</script>

<style lang="less" scoped>
.blog-margin {
  border-radius: 0;
  /deep/.el-card__body {
    padding-left: 5px;
  }
  .el-col {
    margin: 0 5px;
  }
  .el-width-max {
    width: 140px;
  }
  .el-width-mini {
    width: 110px;
  }
  .button-margin {
    margin: 10px 5px;
  }
}
</style>
